<script setup lang="ts">
import { ref, reactive } from 'vue'
import { showNotify, showConfirmDialog } from 'vant'
definePage({
  name: 'equipmentsettings',
  meta: {
    level: 2,
    title: '设备设置',
  },
})
// Device data structure
type Device = {
  id: number
  nickname: string
  ip: string
  status: 'online' | 'offline'
  type: 'printer' | 'access-control' | 'label-printer'
}

// State
const devices = ref<Device[]>([
  {
    id: 1,
    nickname: '设备1',
    ip: '192.168.1.101',
    status: 'online',
    type: 'printer'
  }
])

const showAddDialog = ref(false)
const showTypePicker = ref(false)
const editingDevice = ref<Device | null>(null)
const typeOptions = [
  { text: '打印机', value: '打印机' },
  { text: '门禁', value: '门禁' },
  { text: '标签打印机', value: '标签打印机' }
]

function onTypeConfirm({ selectedOptions }) {
  form.type = selectedOptions[0].value
  showTypePicker.value = false
}

// Form data
const form = reactive<{
  nickname: string
  ip: string
  status: Device['status']
  type: Device['type']
}>({
  nickname: '',
  ip: '',
  status: 'online',
  type: 'printer'
})

// Add new device
function addDevice() {
  if (!form.nickname || !form.ip) {
    showNotify({ type: 'danger', message: '请填写完整信息' })
    return
  }

  devices.value.push({
    id: Date.now(),
    nickname: form.nickname,
    ip: form.ip,
    status: form.status,
    type: form.type
  })

  resetForm()
  showAddDialog.value = false
  showNotify({ type: 'success', message: '添加成功' })
}

// Edit device
function editDevice(device: Device) {
  editingDevice.value = device
  form.nickname = device.nickname
  form.ip = device.ip
  form.status = device.status
  form.type = device.type
  showAddDialog.value = true
}

// Save edits
function saveEdit() {
  if (!editingDevice.value) return

  const device = devices.value.find(d => d.id === editingDevice.value?.id)
  if (device) {
    device.nickname = form.nickname
    device.ip = form.ip
    device.status = form.status
    device.type = form.type
  }

  resetForm()
  showAddDialog.value = false
  showNotify({ type: 'success', message: '修改成功' })
}

// Reset form
function resetForm() {
  form.nickname = ''
  form.ip = ''
  form.status = 'online'
  form.type = 'printer'
  editingDevice.value = null
}

// Remove device
async function removeDevice(id: number) {
  try {
    await showConfirmDialog({
      title: '确认删除',
      message: '确定要删除该设备吗？',
      confirmButtonText: '删除',
      confirmButtonColor: '#ef4444'
    })
    
    devices.value = devices.value.filter(d => d.id !== id)
    showNotify({ type: 'success', message: '删除成功' })
  } catch {
    // User cancelled
  }
}
</script>

<template>
  <div class="p-4 flex flex-col gap-10">
    

    <van-cell-group class="mt-[60px]">
      <van-cell 
        v-for="device in devices"
        :key="device.id"
        :title="device.nickname"
        :label="`${device.type} | IP: ${device.ip}`"
        :value="device.status === 'online' ? '在线' : '离线'"
        :value-class="device.status === 'online' ? 'text-green-500' : 'text-red-500'"
      >
        <template #right-icon>
          <div class="flex items-center gap-3">
            <van-icon 
              name="edit"
              @click.stop="editDevice(device)"
            />
            <van-icon 
              name="delete"
              @click.stop="removeDevice(device.id)"
            />
          </div>
        </template>
      </van-cell>
    </van-cell-group>

    <van-dialog 
      v-model:show="showAddDialog"
      :title="editingDevice ? '编辑设备' : '添加设备'"
      show-cancel-button
      :confirm-button-text="editingDevice ? '保存' : '添加'"
      @confirm="editingDevice ? saveEdit() : addDevice()"
    >
      <van-form class="p-4">
        <van-field
          v-model="form.nickname"
          label="设备昵称"
          placeholder="请输入设备昵称"
        />
        <van-field
          v-model="form.ip"
          label="IP地址"
          placeholder="请输入IP地址"
        />
        <van-field
          v-model="form.type"
          label="设备类型"
          is-link
          readonly
          clickable
          @click="showTypePicker = true"
        />
        <van-popup v-model:show="showTypePicker" position="bottom">
          <van-picker
            :columns="typeOptions"
            @confirm="onTypeConfirm"
            @cancel="showTypePicker = false"
          />
        </van-popup>
        <van-radio-group v-model="form.status" direction="horizontal">
          <van-radio name="online">在线</van-radio>
          <van-radio name="offline">离线</van-radio>
        </van-radio-group>
      </van-form>
    </van-dialog>
    <van-button 
      class="fix b-0"
      type="success" 
      block
      @click="showAddDialog = true"
    >
      添加设备
    </van-button>
  </div>
</template>

<style scoped>
.status-online {
  color: #10b981;
  padding-right: 8px;
}

.status-offline {
  color: #ef4444;
  padding-right: 8px;
}
</style>
